DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>恒台县大数据服务平台</title>
		<link href="css/bootstrap.css" rel="stylesheet">
		<link rel="stylesheet" href="css/base.css">
		<link rel="stylesheet" href="css/index.css">

		<style>
			.t_title {
				width: 100%;
				height: 100%;
				text-align: center;
				font-size:26px;
				line-height: 80px;
				color: #fff;
			}

			#chart_map {
				cursor: pointer;
			}

			.t_show {
				position: absolute;
				top: 0;
				right: 0;
				border-radius: 2px;
				background: #2C58A6;
				padding: 2px 5px;
				color: #fff;
				cursor: pointer;
			}
		</style>
	</head>
	<body>

		<!--header-->
        <!--header-->
		<div class="header">
			<div class="bg_header">
				<div class="header_nav fl t_title">
					恒台县大数据服务平台
				</div>
			</div>
		</div>
		<div class="time">
			<span></span>
			<span class="a"></span>
			<p class="b"></p>
		</div>
		<!--main-->
		<div class="data_content">
			<div class="data_main">
				<div class="main_left fl">
					<div class="left_1 t_btn6" style="cursor: pointer;">
						<!--左上边框-->
						<div class="t_line_box">
							<i class="t_l_line"></i>
							<i class="l_t_line"></i>
						</div>
						<!--右上边框-->
						<div class="t_line_box">
							<i class="t_r_line"></i>
							<i class="r_t_line"></i>
						</div>
						<!--左下边框-->
						<div class="t_line_box">
							<i class="l_b_line"></i>
							<i class="b_l_line"></i>
						</div>
						<!--右下边框-->
						<div class="t_line_box">
							<i class="r_b_line"></i>
							<i class="b_r_line"></i>
						</div>
						<div class="main_title">
							旅游A级景区
						</div>
						<div id="chart1" style="width:100%;height:100%; padding:20px"></div>
					</div>
					<div class="left_2" style="cursor: pointer;">
						<!--左上边框-->
						<div class="t_line_box">
							<i class="t_l_line"></i>
							<i class="l_t_line"></i>
						</div>
						<!--右上边框-->
						<div class="t_line_box">
							<i class="t_r_line"></i>
							<i class="r_t_line"></i>
						</div>
						<!--左下边框-->
						<div class="t_line_box">
							<i class="l_b_line"></i>
							<i class="b_l_line"></i>
						</div>
						<!--右下边框-->
						<div class="t_line_box">
							<i class="r_b_line"></i>
							<i class="b_r_line"></i>
						</div>
						<div class="main_title">
							星级乡村旅游区
						</div>
						<div id="chart2" style="width:100%;height:100%; padding:15px"></div>
					</div>
				</div>
				<div class="main_center fl">
					<div class="center_text onecenter">
						<!--左上边框-->
						<div class="t_line_box">
							<i class="t_l_line"></i>
							<i class="l_t_line"></i>
						</div>
						<!--右上边框-->
						<div class="t_line_box">
							<i class="t_r_line"></i>
							<i class="r_t_line"></i>
						</div>
						<!--左下边框-->
						<div class="t_line_box">
							<i class="l_b_line"></i>
							<i class="b_l_line"></i>
						</div>
						<!--右下边框-->
						<div class="t_line_box">
							<i class="r_b_line"></i>
							<i class="b_r_line"></i>
						</div>
						<div class="main_title">
							接待国内外游客
						</div>
						<div id="chart4" style="width:100%;height:100%; padding-bottom: 8px;"></div>
						<div class="cx">
							<span>查询条件</span> :
							<input type="radio" checked />年度<input type="radio" />季度<input type="radio" />月份
							<input type="text" placeholder="2013" class="a" /> 至 <input type="text" placeholder="2017" class="a" />
							<button>查询</button>
						</div>
					</div>
					<div class="center_text twocenter">
						<!--左上边框-->
						<div class="t_line_box">
							<i class="t_l_line"></i>
							<i class="l_t_line"></i>
						</div>
						<!--右上边框-->
						<div class="t_line_box">
							<i class="t_r_line"></i>
							<i class="r_t_line"></i>
						</div>
						<!--左下边框-->
						<div class="t_line_box">
							<i class="l_b_line"></i>
							<i class="b_l_line"></i>
						</div>
						<!--右下边框-->
						<div class="t_line_box">
							<i class="r_b_line"></i>
							<i class="b_r_line"></i>
						</div>
						<div class="main_title">
							旅游总收入
						</div>
						<div id="chart5" style="width:100%;height:95%;margin-top:10px;"></div>
					</div>
				</div>
				<div class="main_right fr">
					<div class="right_1">
						<!--左上边框-->
						<div class="t_line_box">
							<i class="t_l_line"></i>
							<i class="l_t_line"></i>
						</div>
						<!--右上边框-->
						<div class="t_line_box">
							<i class="t_r_line"></i>
							<i class="r_t_line"></i>
						</div>
						<!--左下边框-->
						<div class="t_line_box">
							<i class="l_b_line"></i>
							<i class="b_l_line"></i>
						</div>
						<!--右下边框-->
						<div class="t_line_box">
							<i class="r_b_line"></i>
							<i class="b_r_line"></i>
						</div>
						<div class="main_title">
							导游男女比例
						</div>
						<div id="dy">
							<div class="dy1">
								<ul>
									<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;男</li>
									<li><img src="img/nan1.png"></li>
									<li><img src="img/nan.png"></li>
									<li><img src="img/nan.png"></li>
									<li><img src="img/nan.png"></li>
									<li><img src="img/nan.png"></li>
									<li><img src="img/nan.png"></li>
									<li><img src="img/nan.png"></li>
									<li>9.1%</li>
								</ul>
								<ul>
									<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;女</li>
									<li><img src="img/nv1.png"></li>
									<li><img src="img/nv1.png"></li>
									<li><img src="img/nv1.png"></li>
									<li><img src="img/nv1.png"></li>
									<li><img src="img/nv1.png"></li>
									<li><img src="img/nv1.png"></li>
									<li><img src="img/nv.png"></li>
									<li>90.9%</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="right_2 db">
						<!--左上边框-->
						<div class="t_line_box">
							<i class="t_l_line"></i>
							<i class="l_t_line"></i>
						</div>
						<!--右上边框-->
						<div class="t_line_box">
							<i class="t_r_line"></i>
							<i class="r_t_line"></i>
						</div>
						<div class="main_title2">
							旅行社/营业部数量统计
						</div>
						<div id="chart7" style="width:100%;height:100%;cursor: pointer;padding: 0px 30px;"></div>
						<span>旅行社个数 </span>
					</div>
					<div class="right_2 db2">
						<!--左下边框-->
						<div class="t_line_box">
							<i class="l_b_line"></i>
							<i class="b_l_line"></i>
						</div>
						<!--右下边框-->
						<div class="t_line_box">
							<i class="r_b_line"></i>
							<i class="b_r_line"></i>
						</div>
						<div id="chart8" style="width:100%;height:100%;cursor: pointer;padding: 0px 30px"></div>
						<span>营业部个数</span>
					</div>
				</div>
			</div>
			<div class="data_bottom">
				<div class="bottom_1 fl t_btn5" style="cursor: pointer;">
					<!--左上边框-->
					<div class="t_line_box">
						<i class="t_l_line"></i>
						<i class="l_t_line"></i>
					</div>
					<!--右上边框-->
					<div class="t_line_box">
						<i class="t_r_line"></i>
						<i class="r_t_line"></i>
					</div>
					<!--左下边框-->
					<div class="t_line_box">
						<i class="l_b_line"></i>
						<i class="b_l_line"></i>
					</div>
					<!--右下边框-->
					<div class="t_line_box">
						<i class="r_b_line"></i>
						<i class="b_r_line"></i>
					</div>
					<div class="main_title1">
						旅游星级饭店
					</div>
					<div id="chart3" class="echart fl" style="width:100%;height:100%; padding:20px"></div>
					<div class="text">
						星级<br />酒店
					</div>
				</div>
				<div class="bottom_center fl">
					<div class="bottom_2 fl">
						<!--左上边框-->
						<div class="t_line_box">
							<i class="t_l_line"></i>
							<i class="l_t_line"></i>
						</div>
						<!--右上边框-->
						<div class="t_line_box">
							<i class="t_r_line"></i>
							<i class="r_t_line"></i>
						</div>
						<!--左下边框-->
						<div class="t_line_box">
							<i class="l_b_line"></i>
							<i class="b_l_line"></i>
						</div>
						<!--右下边框-->
						<div class="t_line_box">
							<i class="r_b_line"></i>
							<i class="b_r_line"></i>
						</div>
						<div class="main_title">
							总收入占GDP比例
						</div>
						<div id="chart6" class="echart fl t_btn4" style="width:100%;height:100%;"></div>
					</div>

				</div>
			</div>
		</div>
	</body>
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>

	<script>
		// 初始化图表对象
		var chart1 = echarts.init(document.getElementById('chart1'));
		// 填写配置项(图表最后是啥样的，怎么表现形式，都是由配置项决定的)
		var option1 = {
			radar: [{
				indicator: [{
						text: '5A',
						max: 100
					},
					{
						text: '4A',
						max: 100
					},
					{
						text: '3A',
						max: 100
					},
					{
						text: '2A',
						max: 100
					},
					{
						text: 'A',
						max: 100
					}
				],
				radius: 80,
				center: ['50%', '55%'],
				name: {
					textStyle: {
						color: '#38C8ED'
					},
				},
				splitArea: {
					areaStyle: {
						color: ['#000B1D',
							'#279AFF', '#000B1D',
							'#092D53', '#000B1D'
						],
						shadowColor: 'rgba(0, 0, 0, 0.3)',
						shadowBlur: 10
					}
				},
				axisLine: {
					lineStyle: {
						color: 'rgba(255, 255, 255, 0.5)'
					}
				},
				splitLine: { //雷达图颜色
					lineStyle: {
						color: ['#4777D4', '#06152E', '#4777D4'],
					}
				},
			}, ],
			series: [{
				type: 'radar',
				tooltip: {
					trigger: 'item'
				},
				itemStyle: {
					normal: {
						color: "rgba(0,0,0,0)", // 图表中各个图区域的边框线拐点颜色
						lineStyle: {
							color: "#00D5B5" // 图表中各个图区域的边框线颜色
						},
						areaStyle: {
							color: '#1495A6'
						}
					},
				},
				data: [{
					value: [80, 80, 0, 80, 100],
				}],

			}, ]
		}
		chart1.setOption(option1);
		// 2
		var chart2 = echarts.init(document.getElementById('chart2'));
		var option2 = {
			textStyle: {
				color: "white",
				fontSize: "14px",
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: { // 坐标轴指示器，坐标轴触发有效
					type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				},
			},
			grid: {
				left: '5%',
				right: '5%',
				bottom: '5%',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				splitLine: {
					show: false
				},
				axisLabel: {
					fontSize: 12,
					color: "#1FCCF6",
				},
				data: ['总数', '1星', '2星', '3星', '4星', '5星'],
				axisLine: {
					lineStyle: {
						color: '#152C56', //x轴的颜色
						type: "dotted",
					}
				},
				axisTick: { //x刻度
					show: false
				}
			},
			yAxis: {
				name: "单位 : 个",
				type: 'value',
				splitLine: {
					lineStyle: {
						type: "dotted",
						color: "#152C56"
					}
				},
				axisLabel: {
					fontSize: 12,
					color: "#1FCCF6",
				},
				axisTick: { //y刻度
					show: false
				},
				axisLine: { //y竖线
					show: false,
				},
			},
			series: [{
					type: 'bar',
					stack: '总量',
					itemStyle: {
						barBorderColor: 'rgba(0,0,0,0)',
						color: 'rgba(0,0,0,0)'
					},
					emphasis: {
						itemStyle: {
							barBorderColor: 'rgba(0,0,0,0)',
							color: 'rgba(0,0,0,0)'
						}
					},
					data: [0, 0, 10, 20, 15, 30]
				},
				{
					type: 'bar',
					stack: '总量',
					label: {
						show: true,
						position: 'inside'
					},
					data: [38, 0, 8, 8, 20, 2],
					itemStyle: {
						normal: {
							//这里是重点
							color: function(params) {
								//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
								var colorList = ['#F26227', '#F26227', '#F26227', '#F26227', '#F26227', '#F26227'];
								return colorList[params.dataIndex]
							}
						}
					}
				},
			]
		}
		chart2.setOption(option2);
		// 3
		var chart3 = echarts.init(document.getElementById('chart3'));
		var option3 = {
			color: ['#2E9AFF', '#AA4DD1',"#C97C5B","#D73C64"],
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b} : {c} ({d}%)'
			},
			textStyle: {
				color: "white",
				fontSize: "16px",
			},
			series: [{
				type: 'pie',
				radius: ['50%', '70%'],
				center: ['50%', '60%'],
				data: [{
						value: 8,
						name: '2A'
					},
					{
						value: 8,
						name: '3A'
					},
					{
						value: 20,
						name: '4A'
					},
					{
						value: 2,
						name: '5A'
					},
					// {value: 0, name: 'A'}
				],
			}]
		}
		chart3.setOption(option3);
		// 4
		var chart4 = echarts.init(document.getElementById('chart4'));
		var option4 = {
			legend: { //图例组件
				x: 'center',
				y: 'bottom',
				show: true,
				textStyle: {
					color: "white",
					fontSize: "12px",
				},
				// itemGap: 25, //图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
				data: ['同比增长率', '国内外游客总数'], //图例的数据数组。
				// inactiveColor: '#ccc', //图例关闭时的颜色。
			},
			grid: { //直角坐标系内绘图网格
				bottom: '10%', //grid 组件离容器下侧的距离。
				left: '5%',
				right: '5%',
				containLabel: true //grid 区域是否包含坐标轴的刻度标签。
			},
			xAxis: [{
				type: 'category',
				data: ["2013", "2014", "2015", "2016", "2017"],
				axisPointer: {
					type: 'shadow'
				},
				axisTick: {
					show: true,
					interval: 0
				},
				axisLabel: {
					fontSize: 12,
					color: "#1FCCF6",
				},
				axisLine: {
					lineStyle: {
						color: '#152C56', //x轴的颜色
						type: "dotted",
					}
				},
				axisTick: { //x刻度
					show: false
				}
			}],
			yAxis: [{
					type: 'value',
					show: true,
					min: "0", //最小坐标
					max: '1800', //最大坐标
					splitNumber: 5, //坐标轴的分割段数
					axisLabel: {
						fontSize: 12,
						color: "#1FCCF6",
					},
					splitLine: {
						lineStyle: {
							type: "dotted",
							color: "#152C56"
						}
					},
					axisLine: { //y竖线
						show: false,
					},
					axisTick: { //y刻度
						show: false
					}
				},
				{
					type: 'value',
					show: false,
				}
			],
			series: [{
					name: '国内外游客总数',
					type: 'bar',
					data: ["800", "1100", "1450", "1150", "1300"],
					barWidth: '20%',
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //图例使用渐变色
								offset: 0,
								color: 'rgb(0, 102, 255)'
							}, {
								offset: 1,
								color: 'rgb(0, 153, 255)'
							}]),
							label: {
								show: false,
								// 								position: 'top',
								// 								textStyle: {
								// 									fontSize: '15',
								// 									fontWeight: 'bold',
								// 									color: 'rgb(51, 51, 51)',
								// 								}
							},
						},
					},
				},
				{
					name: '同比增长率',
					type: 'line',
					yAxisIndex: 1, //这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
					data: ["905", "1180", "1300", "890"],
					symbolSize: 5,
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(255, 0, 90, 1, [{
								offset: 0,
								color: 'rgb(255, 0, 90)'
							}, {
								offset: 1,
								color: 'rgb(255, 0, 90)'
							}]),
							label: {
								show: false,
							}
						},
					},
				},
			]
		}
		chart4.setOption(option4);
		// 5
		var chart5 = echarts.init(document.getElementById('chart5'));
		var option5 = {
			textStyle: {
				color: "white",
				fontSize: "12fpx",
			},
			legend: { //图例组件
				x: 'center',
				y: 'top',
				show: true,
				textStyle: {
					color: "white",
					fontSize: "12px",
				},
				data: ['同比增长率', 'GDP', "旅游总收入", "旅游增加值"], //图例的数据数组。
				padding: 10,
			},
			grid: { //直角坐标系内绘图网格
				top: "15%",
				bottom: '5%', //grid 组件离容器下侧的距离。
				left: '5%',
				right: '5%',

				containLabel: true //grid 区域是否包含坐标轴的刻度标签。
			},
			xAxis: [{
				type: 'category',
				data: ["2013", "2013", "2014", "2014", "2015", "2015", "2016", "2016"],
				axisPointer: {
					type: 'shadow'
				},
				axisTick: {
					show: true,
					interval: 0
				},
				axisLabel: {
					fontSize: 12,
					color: "#1FCCF6",
				},
				axisLine: {
					lineStyle: {
						color: '#152C56', //x轴的颜色
						type: "dotted",
					}
				},
				axisTick: { //x刻度
					show: false
				}
			}],
			yAxis: [{
					name: '单位 : 亿元',
					type: 'value',
					show: true,
					min: "0", //最小坐标
					max: '1800', //最大坐标
					splitNumber: 5, //坐标轴的分割段数
					axisLabel: {
						fontSize: 12,
						color: "#1FCCF6",
					},
					splitLine: {
						lineStyle: {
							type: "dotted",
							color: "#152C56"
						}
					},
					axisTick: { //y刻度
						show: false
					},
					axisLine: { //y竖线
						show: false,
					},
				},
				{
					name: "增长率",
					type: 'value',
					show: true,
					min: "0", //最小坐标
					max: '18', //最大坐标
					splitNumber: 5, //坐标轴的分割段数
					axisLabel: {
						fontSize: 12,
						color: "#1FCCF6",
						formatter: '{value} %'
					},
					splitLine: {
						show: false //是否显示分隔线。
					},
					axisTick: { //y刻度
						show: false
					},
					axisLine: { //y竖线
						show: false,
					},
				},
			],
			series: [{
					name: 'GDP',
					type: 'bar',
					data: ["800", "800", "800", "1550", "1700", "800", "1600", "1500"],
					barWidth: '20%',
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //图例使用渐变色
								offset: 0,
								color: 'rgb(0, 102, 255)'
							}, {
								offset: 1,
								color: 'rgb(0, 153, 255)'
							}]),
							label: {
								show: false,
							},
						},
					},
				},
				{
					name: '旅游总收入',
					type: 'bar',
					data: ["300", "300", "300", "300", "300", "300", "300", "300", ],
					barWidth: '20%',
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //图例使用渐变色
								offset: 0,
								color: '#D73C64'
							}, {
								offset: 1,
								color: '#D73C64'
							}]),
							label: {
								show: false,
							},
						},
					},
				},
				{
					name: '旅游增加值',
					type: 'bar',
					data: ["270", "270", "270", "270", "270", "270", "270", "270", ],
					barWidth: '20%',
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //图例使用渐变色
								offset: 0,
								color: '#C97C5B'
							}, {
								offset: 1,
								color: '#C97C5B'
							}]),
							label: {
								show: false,
							},
						},
					},
				},
				{
					name: '同比增长率',
					type: 'line',
					yAxisIndex: 1, //这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
					data: ["14", "12", "11", "10", "10", "14", "11", "11", ],
					symbolSize: 5, //拐点大小
					// symbol: 'circle',
					itemStyle: {
						normal: {
							color: "#FF005A", //圆点颜色
							lineStyle: {
								color: "#FF005A" //折线颜色
							}
						}
					},
					// 					itemStyle: {
					// 						normal: {
					// 							color: new echarts.graphic.LinearGradient(255, 0, 90, 1, [{
					// 								offset: 0,
					// 								color: '#C97C5B'
					// 							}, {
					// 								offset: 0,
					// 								color: '#C97C5B'
					// 							}]),
					// 							label: {
					// 								show: false,
					// 							}
					// 						},
					// 					},
				},
			]
		}
		chart5.setOption(option5);
		// 6
		var chart6 = echarts.init(document.getElementById('chart6'));
		var option6 = {
			legend: { //图例组件
				x: 'center',
				y: 'top',
				show: true,
				textStyle: {
					color: "white",
					fontSize: 12,
				},
				data: ['旅游总收入占GDP百分比', '旅游增加值占GDP百分比'],
				padding: 35
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: ['2013', '2014', '2015', '2016', '2017'],
				axisLabel: {
					fontSize: 12,
					color: "#1FCCF6",
				},
				axisLine: {
					lineStyle: {
						color: '#152C56', //x轴的颜色
						type: "dotted",
					}
				},
				axisTick: { //x刻度
					show: false
				},
			},
			yAxis: {
				type: 'value',
				min: "0", //最小坐标
				max: '25', //最大坐标
				splitNumber: 5, //坐标轴的分割段数
				axisLabel: {
					fontSize: 12,
					color: "#1FCCF6",
					formatter: '{value} %'
				},
				splitLine: {
					show: true, //是否显示分隔线。
					lineStyle: {
						color: '#152C56', //x轴的颜色
						type: "dotted",
					}
				},
				axisTick: { //y刻度
					show: false
				},
				axisLine: { //y竖线
					show: false,
				},
			},
			series: [{
					name: '旅游总收入占GDP百分比',
					type: 'line',
					data: [21, 24, 22, 21, 21, 20],
					showSymbol: false, //不显示拐点,
					areaStyle: {
						color: "#063343"
					},
					itemStyle: {
						normal: {
							color: "#11B58E", //圆点颜色
							lineStyle: {
								color: "#11B58E" //折线颜色
							}
						}
					},
				},
				{
					name: '旅游增加值占GDP百分比',
					type: 'line',
					data: [12, 12, 12, 12, 12, 12],
					showSymbol: false, //拐点大小,
					areaStyle: {
						color: "#132C5B"
					},
					itemStyle: {
						normal: {
							color: "#2D56A2", //圆点颜色
							lineStyle: {
								color: "#2D56A2" //折线颜色
							}
						}
					},
				},
			]
		}
		chart6.setOption(option6);
		// 7
		var chart7 = echarts.init(document.getElementById('chart7'));
		var option7 = {
			// 			grid: {
			// 				left: '3%',
			// 				right: '4%',
			// 				bottom: '3%',
			// 				containLabel: true
			// 			},
			color: ['#3397F9', '#112F5A'],
			series: [{
				type: 'pie',
				radius: ['50%', '70%'],
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: 'center'
				},
				emphasis: {
					label: {
						show: true,
						fontSize: '50',
						fontWeight: 'bold',
						color: "#3D89D4"
					}
				},
				labelLine: {
					show: true
				},
				data: [{
						value: 62,
						name: '62'
					},
					{
						value: 38
					},
				]
			}]
		}
		chart7.setOption(option7);
		// 8
		var chart8 = echarts.init(document.getElementById('chart8'));
		var option8 = {
			// 			grid: {
			// 				left: '3%',
			// 				right: '4%',
			// 				bottom: '3%',
			// 				containLabel: true
			// 			},
			color: ['#FF9102', '#47301A'],
			series: [{
				type: 'pie',
				radius: ['50%', '70%'],
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: 'center'
				},
				emphasis: {
					label: {
						show: true,
						fontSize: '50',
						fontWeight: 'bold',
						color: "#FF9102"
					}
				},
				labelLine: {
					show: true
				},
				data: [{
						value: 65,
						name: '35'
					},
					{
						value: 20
					},
				]
			}]
		}
		chart8.setOption(option8);
		// 
		window.addEventListener("resize", function() {
			chart1.resize();
			chart2.resize();
			chart3.resize();
			chart4.resize();
			chart5.resize();
			chart6.resize();
			chart7.resize();
			chart8.resize();
		});
		var time =document.querySelector(".time");
		var a =document.querySelector(".time .a");
		var b =document.querySelector(".time .b");
		var span =document.querySelector(".time span");
		var time1=new Date();
		var year=time1.getFullYear();
		var month=time1.getMonth()+1;
		month=month<10?"0"+month:month;
		var data=time1.getDate();
		var day=time1.getDay();
		day=day==1?"一":"一";
		
		a.innerText="星期"+day;
		b.innerText=year+"."+month+"."+data;
		
		setInterval(function(){
			var time1=new Date();
			var hours=time1.getHours();
			hours=hours<10?"0"+hours:hours;
			var minutes=time1.getMinutes();
			minutes=minutes<10?"0"+minutes:minutes;
			var seconds=time1.getSeconds();
			seconds=seconds<10?"0"+seconds:seconds;
			span.innerText=hours+"："+minutes+"："+seconds;
		},1000)
	</script>
</html>
